<template>
  <!-- 视频类型选择按钮组：通过el-row justify实现整体居中 -->
  <el-row 
    class="video-type-btn-group" 
    :gutter="16"  
    justify="center"  
  >
    <!-- YouTube 按钮：el-col宽度统一，确保按钮等宽基础 -->
    <el-col :span="6" class="btn-col">
      <el-button
        type="text"
        class="type-btn"
        :style="{ '--btn-gradient': 'linear-gradient(135deg, #FF0000 0%, #CC0000 100%)' }"
        @click="handleClick('youtube')"
      >
        <!-- <i class="iconfont icon-youtube"></i>-->
        <span class="btn-text">YouTube</span> 
      </el-button>
    </el-col>

    <!-- Bilibili 按钮 -->
    <el-col :span="6" class="btn-col">
      <el-button
        type="text"
        class="type-btn"
        :style="{ '--btn-gradient': 'linear-gradient(135deg, #FB7299 0%, #F54EA2 100%)' }"
        @click="handleClick('bili')"
      >
        <!-- <i class="iconfont icon-bilibili"></i>-->
        <span class="btn-text">Bilibili</span> 
      </el-button>
    </el-col>

    <!-- 本地视频按钮：移除行内固定宽度，统一用样式控制 -->
    <el-col :span="6" class="btn-col">
      <el-button
        type="text"
        class="type-btn"
        :style="{ '--btn-gradient': 'linear-gradient(135deg, #4CD964 0%, #2AC871 100%)' }"
        @click="handleClick('local')"
      >
        <!-- <i class="iconfont icon-local"></i> -->
        <span class="btn-text">本地视频</span>
      </el-button>
    </el-col>
  </el-row>
</template>

<script setup>
//import { emit } from '@tauri-apps/api/event';


const emit = defineEmits(['handleClick'])
const handleClick = (type) => {

    emit('handleClick',type)
  
  // 点击后消失逻辑示例（按需启用）
  // document.querySelector('.video-type-btn-group').style.display = 'none';
};
</script>

<style scoped>
/* 按钮组外层样式：控制整体边距和背景，无需额外flex（el-row已处理） */
.video-type-btn-group {
  padding: 12px 24px;
  margin: 0 auto !important; /* 确保按钮组本身在页面中居中（可选，根据父容器调整） */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 关键：el-col列容器控制，让按钮填充满列且居中 */
.btn-col {
  display: flex;
  justify-content: center; /* 控制按钮在el-col中居中 */
  padding: 0 !important; /* 清除el-col默认padding，避免按钮偏移 */
}

/* 基础按钮样式：统一宽度+内部内容居中 */
.type-btn {
  width: 80% !important; /* 按钮填充满btn-col，确保所有按钮等宽 */
  max-width: 160px; /* 限制最大宽度，避免大屏时按钮过宽 */
  display: flex !important;
  align-items: center !important; /* 图标+文字垂直居中 */
  justify-content: center !important; /* 图标+文字水平居中（核心） */
  gap: 8px; /* 图标与文字间距 */
  padding: 10px 10px !important;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: #f5f7fa !important;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

/* Hover效果：保持原有交互 */
.type-btn:hover {
  color: #fff !important;
  background: var(--btn-gradient) !important;
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 点击按压效果 */
.type-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 图标样式 */
.iconfont {
  font-size: 18px;
}

/* 文字样式：禁止换行，确保按钮高度一致 */
.btn-text {
  white-space: nowrap;
}

/* 引入外部图标库 */
/* @import url("//at.alicdn.com/t/c/font_3835828_8k6c0s9z7y9.css"); */
</style>